import { View, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import { OrderWrapper, immutable } from 'wmkit';
import * as T from '../types';
import actions from '../actions/index';
import { connect } from 'react-redux';
import { store2Props } from '../selectors';
import './order-status.less';

type OrderStatusProps = T.IProps & T.OrderStatusProps;

@connect<Partial<OrderStatusProps>, T.OrderStatusState>(store2Props, actions)
export default class OrderStatus extends Component<Partial<OrderStatusProps>, T.OrderStatusState> {
  constructor(props: OrderStatusProps) {
    super(props);
  }
  render() {
    let { main } = this.props;
    const { detail, chargeAccount, huiHuaChargeStatus } = main || {};
    let orderWrapper;
    if (detail) orderWrapper = OrderWrapper(immutable.fromJS(detail));
    return (
      detail && (
        <View className="order-status">
          <View className="status">
            <Text className="text1">订单状态</Text>
            <Text className="result">
              {orderWrapper.orderState()}
              {/*待付款*/}
            </Text>
          </View>
          {orderWrapper.isVoidTrade() ? (
            <View className="status">
              <Text className="text2">作废原因</Text>
              <Text className="text textFlex">
                {orderWrapper.obsoloteReason()}
                {/*收货地址错误*/}
              </Text>
            </View>
          ) : (
            ''
          )}
          <View className="status">
            <Text className="text2">订单号</Text>
            <View className="text" style={{ flexDirection: 'row', alignItems: 'center' }}>
              {' '}
              {orderWrapper.platform() != 'CUSTOMER' && <Image className="imgs" src={require('../img/dai.png')} />}{' '}
              {orderWrapper.orderNo()}
              <View
                className="btn"
                onClick={() => {
                  Taro.setClipboardData({
                    data: orderWrapper.orderNo(),
                  }).then((res) => {
                    // web端手动提示，小程序端有默认提示
                    if (Taro.getEnv() == Taro.ENV_TYPE.WEB) {
                      Taro.showToast({
                        title: '内容已复制',
                        icon: 'success',
                      });
                    }
                  });
                }}
              >
                复制
              </View>
            </View>
          </View>
          <View className="status">
            <Text className="text2">下单时间</Text>
            <Text className="text">{orderWrapper.createTime()}</Text>
          </View>

          {!!chargeAccount && (
            <View className="status">
              <Text className="text2">充值状态</Text>
              <Text className="text">{this.getRechargeStatus(huiHuaChargeStatus)}</Text>
            </View>
          )}
        </View>
      )
    );
  }

  getRechargeStatus = status => {
    if (status === 0) return '充值中'
    if (status === 1) return '充值成功'
    if (status === 2) return '充值失败'
    return '-'
  }
}
